<template>
  <div>
    <div class="serach">
      <p><van-icon name="arrow-left" /></p>
      <div class="top">
        <div class="center">
          <router-link to="/citylist">
          <span>上海</span>
          <van-icon name="arrow-down" />
          </router-link>
          <i>\</i>
        </div>
        <div class="form">
          <span><van-icon name="search" /></span>
          <span class="text">请输入小区或地址</span>
        </div>
      </div>
        <router-link to='/maphouse'>
      <van-icon name="map-marked" class="map" />
        </router-link>

    </div>

    <!-- 下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" title="区域">
        <van-picker  :columns="columns" />
      </van-dropdown-item>
      <van-dropdown-item v-model="value2" title="方式" >
        <van-picker title="标题" :columns="columns1" />
      </van-dropdown-item>
      <van-dropdown-item v-model="value3" title="租金">
        <van-picker title="标题" :columns="columns" />
      </van-dropdown-item>
      <van-dropdown-item v-model="value4" title="筛选">
        <!-- <van-picker title="标题" :columns="columns" /> -->
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 列表 -->
    <div class="list" v-for="item in getlist" :key="item" @click="goDetail(index)">
      <div class="pic">
        <img :src="`http://liufusong.top:8080${item.houseImg}`" alt="" />
      </div>
      <div class="right">
        <h3>{{item.title}}</h3>
        <div class="detail">{{item.desc}}</div>
        <div class="sub"><span>{{item.tags[0]}}</span></div>
        <p><span>{{item.price}}</span>元/月</p>
      </div>
    </div>
    <!-- <van-cell is-link @click="showPopup">展示弹出层</van-cell>
<van-popup v-model:show="show" :style="{ padding: '64px' }">内容</van-popup> -->
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "VueJobFind",
  data() {
    return {
      getlist: [],
      value1: 0,
      value2: 1,
      value3: 2,
      value4: 3,
      columns: [
        // 第一列
        {
          values: ["区域", "地铁"],
          defaultIndex: 1,
        },
        // 第二列
        {
          values: ["不限", "杨浦", "徐汇", "普陀"],
          defaultIndex: 1,
        },
      ],
      columns1: ["不限", "整租", "合租"],
      columns2: ["不限", "1000及以下", "1000-2000", "2000-3000"],
    };
  },
  created() {
    this.getList();
  },
  mounted() {},

  methods: {
    getList() {
      axios({
        url: "http://liufusong.top:8080/houses?cityId=AREA%7Cdbf46d32-7e76-1196",
        params: {
          stat: 1,
          end: 10,
        },
      }).then((res) => {
        console.log(res.data.body);
        this.getlist = res.data.body.list;
      });
    },
    goDetail(index) {
      console.log(index);
      this.$router.push({
        path: `/detail?id=${index}`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.serach {
  height: 50px;
  display: flex;
  background-color: #21b97a;
  padding: 0 10px;
  align-items: center;
  p {
    color: #fff;
    font-size: 18px;
  }
  .top {
    display: flex;
    flex: 1;
    background-color: #fff;
    height: 34px;
    margin: 0 10px;
    border-radius: 3px;
    align-items: center;
    padding: 1px 8px;
    font-size: 14px;
    color: #333;
    .center {
      a{
        color: #333;
      }
      i {
        margin-left: 12px;
        color: #9c9fa1;
      }
    }
    .form {
      padding-left: 10px;
      color: #9c9fa1;
      line-height: 34px;
      font-size: 16px;
      span {
        color: #9c9fa1;
      }
      .text {
        padding-left: 4px;
        font-size: 13px;
      }
    }
  }
  .map {
    color: #fff;
    font-size: 18px;
    height: 25px;
    width: 25px;
    text-align: center;
    line-height: 23px;
    border: 1.5px solid #fff;
    border-radius: 50%;
  }
}
.list {
  margin: 0 auto;
  display: flex;
  width: 345px;
  height: 101px;
  border-bottom: 1px solid #e5e5e5;
  padding-top: 18px;
  .pic {
    width: 106px;
    height: 80px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    width: 239px;
    padding-left: 12px;
    font-size: 12px;
    // line-height: 22px;
    h3 {
      font-size: 15px;
      margin: 0;
      font-weight: 400;
      color: #394043;
      line-height: 19px;
    }
    .detail {
      color: #afb2b3;
      line-height: 23px;
    }
    .sub {
      display: inline-block;
      border: 0px solid #333;
      border-radius: 3px;
      color: #39becd;
      font-size: 12px;
      background-color: #e1f5f8;
    }
    p {
      margin: 0;
      line-height: 28px;
      color: #fa5741;
      span {
        font-size: 16px;
        font-weight: bolder;
        padding-right: 2px;
      }
    }
  }
}
</style>
